/**
 * Created by karl.zheng on 2018/4/9.
 */
import React from 'react';
import {connect} from 'react-redux'
import {Link} from 'react-router'
require('./index.css');

class Main extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return (
            <div className="info-main">
                <div className="info-account">
                    <div className="info-head"></div>
                    <div className="info-msg">
                        <p className="info-name">Account: {this.props.account.userName}</p>
                        <p className="info-id">
                            <span>UDID: {this.props.account.userId}</span>
                            {/*<span className="copy">Copy</span>*/}
                        </p>
                        <a className="pay-his">Payment History</a>
                    </div>
                </div>
                <div className="others">
                    <Link className="item-other" to="/info/pass">
                        <img src={require("../../../images/ui_setting.png")} />
                        <p>Change Password</p>
                        <img src={require("../../../images/ui_right_arrow.png")} className="right"/>
                    </Link>
                    <Link className="item-other setting" >
                        <img src={require("../../../images/ui_email.png")} />
                        <p>Security Setting</p>
                        <img src={require("../../../images/ui_right_arrow.png")} className="right"/>
                        <p className="right">Email:eward@7road.com</p>
                    </Link>
                    <Link className="item-other" to="/login/choose">
                        <img src={require("../../../images/ui_switch_account.png")} />
                        <p>Change Account</p>
                        <img src={require("../../../images/ui_right_arrow.png")} className="right"/>
                    </Link>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    account: state.user
});

export default connect(
    mapStateToProps,
    {}
)(Main);


